<template>
    <div class="cate-container">

        <!-- 搜索 -->
        <el-form :inline="true" class="demo-form-inline">
            <!-- 搜索姓名或手机号 -->
            <el-form-item>
                <el-input placeholder="分类名称" disabled />
            </el-form-item>

            <!-- 日期搜索 -->
            <el-form-item>
                <el-date-picker disabled v-model="timeValue" type="daterange" start-placeholder="开始日期"
                    end-placeholder="结束日期" :default-time="defaultTime" style="width: 230px" range-separator="--" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" disabled>
                    <el-icon style="font-weight:bolder; margin-right: 5px">
                        <Search />
                    </el-icon>
                    搜索
                </el-button>
            </el-form-item>

            <el-form-item>
                <el-button disabled type="primary" style="margin-left: 480px;">
                    <el-icon style="font-weight:bolder; ">
                        <Plus />
                    </el-icon>
                    添加
                </el-button>
            </el-form-item>
        </el-form>

        <!-- 分类数据表格 -->
        <el-table :data="cateData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :border="true"
            style="width: 100%" class="cate-data" :table-layout="tableLayout" :header-cell-style="{
                background: '#ecf7ff',
                color: '#666666',
                fontWeight: '600',
                fontSize: '16px',
            }" :span-method="objectSpanMethod">

            <el-table-column prop="cateNum" label="序号" />
            <el-table-column prop="cateName" label="分类名称" />
            <el-table-column prop="cateSort" label="分类排序" />
            <el-table-column prop="addTime" label="添加时间" />
            <el-table-column prop="cateOperation" label="操作">
                <template #default="{ row }">
                    <el-button disabled type="primary" :icon="Edit" circle />
                </template>
            </el-table-column>
        </el-table>

        <el-pagination layout="prev, pager, next" :total="totalSize" :page-size="pageSize" :current-page="currentPage"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" class="pagination-box" />

    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Search, Edit, Plus } from '@element-plus/icons-vue';
import { getCateDatalist } from '../../api/user';

// 日期选择
const timeValue = ref('')
// 表格列自适应  
const tableLayout = ref('auto')
const currentPage = ref(1)
const pageSize = ref(10)
const cateData = ref([])

const totalSize = computed(() => {
    return cateData.value?.length
})

const handleSizeChange = (val) => {
    pageSize.value = val
}
const handleCurrentChange = (val) => {
    currentPage.value = val
}

// 默认日期
const defaultTime = [
    new Date(2000, 1, 1, 12, 0, 0),
    new Date(2000, 2, 1, 8, 0, 0),
] // '12:00:00', '08:00:00'

const objectSpanMethod = ({
    row,
    column,
    rowIndex,
    columnIndex,
}) => {
    if (columnIndex === 0) {
        if (rowIndex % 4 === 0) {
            return {
                rowspan: 4,
                colspan: 1,
            }
        } else {
            return {
                rowspan: 0,
                colspan: 0,
            }
        }
    }
}

const fetedata = async () => {
    cateData.value = await getCateDatalist()
}

onMounted(() => {
    fetedata()
})

// 计算合并行下标
// const tabRow = computed(() => {
//     let arr = []
//     cateData.value.forEach((item) => {
//         const tmp = item.cateNum
//         if (arr.includes(tmp) == false) {
//             arr.push(tmp)
//         }
//     })
//     return arr
// })

</script>

<style lang="scss" scoped>
.demo-form-inline {
    display: flex;
}

.cate-container {
    height: 100%;
    padding: 32px;
    box-sizing: border-box;
    min-height: 600px;
}

.cate-data {
    width: 100%;
}

:deep(.el-input) {
    width: 150px;
    margin-right: 20px;
}

:deep(.el-table .el-table__cell) {
    text-align: center;
}

:deep(.text-color) {
    color: blue
}

.pagination-box {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
</style>